import React, { Component } from 'react'
// import ContextTypePage from './ContextTypePage'
import { ThemeProvider } from './ThemeContext.js'
import { UserProvider } from './UserContext'
import ConsumerPage from './ConsumerPage'

// context就是用于组件之间数据传递的，与Vue中的provide与inject类似，对于多层级的组件传值很有用
// 这里就是react中的context使用方法  详细的可以去看pdf
// 一般都会将context抽离成一个独立的js文件，才好下后续的组件中进行引入， 我们这里将context抽离成了ThemeContext
// 创建context上下文   类似于商铺
// const ThemeContext = React.createContext()
// 获取context中的provider提供数据   provider就是供应商的意思
// const ThemeProvider = ThemeContext.Provider

// 抽象一下大概就是 createContext创建一个商铺  Provider就是供应商， 商铺中只存在供应商供应的商品
// 消费者就可以通过商铺来获取商品，至于怎么取得商品就是引入创建出来的商铺就行了

class ContextPage extends Component {
  constructor (props) {
    super(props)
    this.state = {
      theme: {
        themeColor: 'red'
      },
      user: {
        name: 'zhangxu'
      }
    }
  }

  render () {
    let { theme, user } = this.state
    return (
      <div>
        <h3>ContextPage</h3>
        {/* 只有用provider标签包裹的才能获取数据，接收一个value属性，传递给里层，这里是抽离出来的provider */}
        {/* 注意：这里传递的theme是一个对象 theme:{themeColor:'red' } 但是传递的只有值  */}
        {/* 内部组件只能获取到 this.context={themeColor:'red'}  也就是说，如果我们传递了  a:1 */}
        {/* 但是内部只能获取到this.context=1  传递的只有值 */}
        <ThemeProvider value = {theme}>
          <UserProvider value = {user}>
            {/* 这是类组件的写法 */}
            {/*<ContextTypePage />*/}
            <ConsumerPage />
          </UserProvider>
        </ThemeProvider>
      </div>
    )
  }
}

export default ContextPage
